<template>
  <div>
    <el-form
      :model="formData"
      :rules="formRules"
      ref="formData"
      label-position="top"
      label-width="100px"
      v-loading="loading"
      class="campForm"
    >
      <el-card class="box-card" style="margin-top: 0;">
        <div class="text item">
          <div class="cont_title">基础设置</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="营地名称" prop="name">
                <el-input
                  ref="name"
                  v-model.trim="formData.name"
                  placeholder="请填写50字以内的名称"
                  clearable
                  size="small"
                  suffix-icon="el-icon-user-solid"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="系统名称" prop="systemName">
                <el-input
                  ref="systemName"
                  v-model.trim="formData.systemName"
                  placeholder="请填写30字以内的名称"
                  clearable
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报名费用" prop="registrationFee">
                <div class="item_info item_info1">（一旦创建，不可修改）</div>
                <el-input
                  ref="registrationFee"
                  v-model.trim="formData.registrationFee"
                  placeholder="请填写报名费用"
                  clearable
                  size="small"
                  @input="onInputValue"
                  :disabled="isEdit"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="timeStyle">
              <el-form-item label="报名起止时间" prop="registrationStart">
                <el-date-picker
                  ref="registrationStart"
                  v-model="formData.registrationStart"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  class="date_picker"
                  placeholder="选择开始时间"
                  :picker-options="pickerOptions1"
                  @change="datePickerChange(1,$event)"
                  :popper-append-to-body="false"
                >
                </el-date-picker>
              </el-form-item>
              <div class="zhi">至</div>
              <el-form-item label=" " prop="registrationEnd" class="no_label">
                <el-date-picker
                  ref="registrationEnd"
                  v-model="formData.registrationEnd"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  class="date_picker"
                  placeholder="选择结束时间"
                  :picker-options="pickerOptions2"
                  @change="datePickerChange(2,$event)"
                  :popper-append-to-body="false"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!--<el-col :span="12" class="timeStyle">
              <el-form-item label="提交作业起止时间" prop="jobSubmissionStart">
                <div class="item_info item_info2">（非必填）</div>
                <el-date-picker
                  v-model="formData.jobSubmissionStart"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  class="date_picker"
                  placeholder="选择开始时间"
                  :picker-options="pickerOptions3"
                  @change="datePickerChange(3,$event)"
                  :popper-append-to-body="false"
                >
                </el-date-picker>
              </el-form-item>
              <div class="zhi">至</div>
              <el-form-item label=" " prop="jobSubmissionEnd">
                <el-date-picker
                  v-model="formData.jobSubmissionEnd"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  class="date_picker"
                  placeholder="选择结束时间"
                  :picker-options="pickerOptions4"
                  @change="datePickerChange(4,$event)"
                  :popper-append-to-body="false"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>-->
            <el-col :span="12" class="timeStyle">
              <el-form-item label="获取证书起止时间" prop="downloadCertificateStart">
                <!--<div class="item_info item_info2">（非必填）</div>-->
                <el-date-picker
                  v-model="formData.downloadCertificateStart"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  class="date_picker"
                  placeholder="选择开始时间"
                  :picker-options="pickerOptions5"
                  @change="datePickerChange(5,$event)"
                  :popper-append-to-body="false"
                >
                </el-date-picker>
              </el-form-item>
              <div class="zhi">至</div>
              <el-form-item label=" " prop="downloadCertificateEnd" class="no_label">
                <el-date-picker
                  v-model="formData.downloadCertificateEnd"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  class="date_picker"
                  placeholder="选择结束时间"
                  :picker-options="pickerOptions6"
                  @change="datePickerChange(6,$event)"
                  :popper-append-to-body="false"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card">
        <div class="text item">
          <div class="cont_title">样式设置</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="系统logo" prop="systemLogo">
                <div class="item_info item_info3">（支持JPG、JPEG、PNG等格式，图片不超过10M）</div>
                <el-upload
                  ref="systemLogo"
                  name="multipartFile"
                  :action="logoImgAction"
                  :headers="headers"
                  :disabled="isLogoLoading"
                  v-loading="isLogoLoading"
                  accept=".jpg,.jpeg,.png"
                  list-type="picture-card"
                  :show-file-list="false"
                  :on-success="handleLogoSuccess"
                  :before-upload="beforeLogoUpload">
                  <img v-if="formData.systemLogo" :src="formData.systemLogo" class="avatar logo_img">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登录页背景图" prop="backgroundPicture">
                <div class="item_info item_info4">（支持JPG、JPEG、PNG等格式，图片不超过10M）</div>
                <el-upload
                  ref="backgroundPicture"
                  name="multipartFile"
                  :action="bgImgAction"
                  :headers="headers"
                  :disabled="isBgLoading"
                  v-loading="isBgLoading"
                  accept=".jpg,.jpeg,.png"
                  list-type="picture-card"
                  :show-file-list="false"
                  :on-success="handleBgSuccess"
                  :before-upload="beforeBgUpload">
                  <img v-if="formData.backgroundPicture" :src="formData.backgroundPicture" class="avatar bg_img">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="配色设置" prop="systemColor">
                <div class="color_item"
                     v-for="(item, index) in predefineColors"
                     :key="index"
                     :ref="`colorItem${index}`"
                     :class="colorChecked[index]?'is_check':''"
                     :style="{backgroundColor:item}"
                     @click="selectColor(item, index)">
                </div>

                <el-color-picker
                  ref="systemColor"
                  v-model="formData.systemColor"
                  show-alpha
                  :predefine="predefineColors"
                  @change="colorChange"
                >
                </el-color-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card signUp">
        <div class="text item">
          <div class="cont_title">报名流程配置<span>（一旦创建，不可修改）</span></div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-row>
                <el-col>
                  <el-form-item label="是否开启个人报名" prop="openIndividualRegistration">
                    <el-switch
                      v-model="formData.openIndividualRegistration"
                      active-color="#4D75F3"
                      inactive-color="#BCC2CA"
                      :active-value="1"
                      :inactive-value="0"
                      @change="changeSwitch(1, $event)"
                      :disabled="isEdit"
                    >
                    </el-switch>
                  </el-form-item>
                </el-col>
                <div v-show="formData.openIndividualRegistration==1">
                  <el-col>
                    <el-form-item label="是否填写邀请码" prop="fillIndividualInvitationcode" class="font_color">
                      <el-radio-group
                        v-model="formData.fillIndividualInvitationcode"
                        :disabled="isEdit"
                      >
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="是否填写报名资料" prop="fillIndividualInformation" class="font_color">
                      <el-radio-group
                        v-model="formData.fillIndividualInformation"
                        :disabled="isEdit"
                        @change="changeGroup(1, $event)"
                      >
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="是否审核报名资料" prop="auditIndividualInformation" class="font_color">
                      <el-radio-group
                        v-model="formData.auditIndividualInformation"
                        :disabled="isEdit"
                        @change="changeGroup(2, $event)"
                      >
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </div>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col>
                  <el-form-item label="是否开启中学报名" prop="openSchoolRegistration">
                    <el-switch
                      v-model="formData.openSchoolRegistration"
                      active-color="#4D75F3"
                      inactive-color="#BCC2CA"
                      :active-value="1"
                      :inactive-value="0"
                      @change="changeSwitch(2, $event)"
                      :disabled="isEdit"
                    >
                    </el-switch>
                  </el-form-item>
                </el-col>
                <div v-if="formData.openSchoolRegistration==1">
                  <el-col>
                    <el-form-item label="是否批量缴费" prop="schoolBulkPayment" class="font_color">
                      <el-radio-group
                        v-model="formData.schoolBulkPayment"
                        :disabled="isEdit"
                      >
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </div>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card">
        <div class="text item">
          <div class="cont_title"><i>*</i>上传营地通知书PDF</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="" prop="pdfAddress">
                <el-upload
                  ref="pdfAddress"
                  name="multipartFile"
                  :action="pdfImgAction"
                  :headers="headers"
                  :disabled="isPDFLoading"
                  v-loading="isPDFLoading"
                  accept=".pdf"
                  list-type="picture-card"
                  :show-file-list="false"
                  :on-success="handlePDFSuccess"
                  :before-upload="beforePDFUpload">
                  <div v-if="formData.pdfAddress">上传成功</div>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div class="pdf-box" v-if="formData.pdfAddress">{{formData.pdfAddress}}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card">
        <div class="text item">
          <div class="cont_title"><i>*</i>招生简章</div>
          <el-form-item label="" prop="studentRecruitmentBrochure">
            <tinymce-editor
              ref="studentRecruitmentBrochure"
              :isEdit="true"
              :editValue="formData.studentRecruitmentBrochure"
              @changeEditor="changeEditor"
            ></tinymce-editor>
          </el-form-item>
        </div>
      </el-card>

      <el-card class="box-card">
        <div class="text item">
          <div class="cont_title"><i>*</i>营地须知</div>
          <el-form-item label="" prop="examInstructions">
            <tinymce-editor
              ref="examInstructions"
              :isEdit="true"
              :editValue="formData.examInstructions"
              @changeEditor="changeEditor2"
            ></tinymce-editor>
          </el-form-item>
        </div>
      </el-card>

      <el-form-item class="btn">
        <el-button
          type="primary"
          @click="editHandle"
          v-if="isEdit"
          v-hasPermi="['campSystem:campOper:edit']"
        >保存</el-button>
        <el-button
          type="primary"
          @click="confirm"
          v-if="!isEdit"
          v-hasPermi="['campSystem:campOper:add']"
        >立即创建</el-button>
      </el-form-item>
    </el-form>

    <!--创建成功提示弹框-->
    <create-success
      :successDialogFu="successDialogFu"
      :campUrlFu="campUrlFu"
      @closeSuccessDialog="closeSuccessDialog"
    ></create-success>
  </div>
</template>

<script>
  import {getToken} from "@/utils/auth";
  import {CreateCamp, EditCamp} from "@/api/campSystem/campOper";
  import TinymceEditor from "@/components/CampSystem/CampOper/CampTiny";
  import CreateSuccess from "@/components/CampSystem/CampOper/CreateSuccess";

  export default {
    name: "CampForm",
    props: {
      isEdit: [Boolean],
      formDataFu: [Object]
    },
    components: {
      TinymceEditor,
      CreateSuccess,
    },
    data() {
      return {
        loading: false,
        formData: {
          name: null,
          systemName: null,
          registrationFee: null,
          registrationStart: null,
          registrationEnd: null,
          jobSubmissionStart: null,
          jobSubmissionEnd: null,
          downloadCertificateStart: null,
          downloadCertificateEnd: null,
          systemLogo: null,
          backgroundPicture: null,
          systemColor: null,
          pdfAddress: null,
          openIndividualRegistration: 1,
          openSchoolRegistration: 1,
          fillIndividualInformation: 1,
          schoolBulkPayment: 1,
          fillIndividualInvitationcode: 1,
          auditIndividualInformation: 1,
          studentRecruitmentBrochure: '',
          examInstructions: '',
        },
        formRules: {
          name: [
            {required: true, message: '请输入营地名称', trigger: 'blur'},
            {max: 50, message: '长度在50个字符以内', trigger: 'blur'}
          ],
          systemName: [
            {required: true, message: '请输入系统名称', trigger: 'blur'},
            {max: 30, message: '长度在30个字符以内', trigger: 'blur'}
          ],
          registrationFee: [
            {required: true, message: '请输入报名费用', trigger: 'blur'}
          ],
          registrationStart: [
            {required: true, message: '请选择报名开始时间', trigger: 'change'}
          ],
          registrationEnd: [
            {required: true, message: '请选择报名结束时间', trigger: 'change'}
          ],
          downloadCertificateStart: [
            {required: true, message: '请选择获取证书开始时间', trigger: 'change'}
          ],
          downloadCertificateEnd: [
            {required: true, message: '请选择获取证书结束时间', trigger: 'change'}
          ],
          systemLogo: [
            {required: true, message: '请上传系统logo', trigger: 'blur'}
          ],
          backgroundPicture: [
            {required: true, message: '请上传登录页背景图', trigger: 'blur'}
          ],
          systemColor: [
            {required: true, message: '请选择主题配色', trigger: 'change'}
          ],
          pdfAddress: [
            {required: true, message: '请上传营地通知书PDF', trigger: 'blur'}
          ],
          studentRecruitmentBrochure: [
            {required: true, message: '请设置招生简章', trigger: 'blur'}
          ],
          examInstructions: [
            {required: true, message: '请设置营地须知', trigger: 'blur'}
          ],
        },
        signUpPicker: [],// 报名起止时间
        submitJobPicker: [],// 提交作业起止时间
        downloadPicker: [],// 获取证书起止时间
        // 上传图片请求头
        headers: {
          Authorization: "Bearer " + getToken()
        },
        isLogoLoading: false,// 系统logo-loading
        logoImgAction: process.env.VUE_APP_BASE_API + "/modules-campsite/conf/uploadLogo", // logo上传接口
        isBgLoading: false,// 背景图-loading
        bgImgAction: process.env.VUE_APP_BASE_API + "/modules-campsite/conf/uploadImage", // 背景图上传接口
        isPDFLoading: false,// pdf-loading
        pdfImgAction: process.env.VUE_APP_BASE_API + "/modules-campsite/conf/uploadPdf", // pdf上传接口
        // 默认颜色列表
        predefineColors: [
          'rgba(77, 117, 243, 1)',
          'rgba(96, 25, 74, 1)',
          'rgba(60, 7, 100, 1)'
        ],
        // 默认颜色选中/未选中样式
        colorChecked: {},
        successDialogFu: false, // 控制营地创建成功提示弹框显示与隐藏
        campUrlFu: '',// 营地系统网址
        // 时间禁用区域
        pickerOptions: {
          // 限制时间
          selectableRange: '',
          // 限制日期
          disabledDate(date) {
            return date.getTime() < new Date().setHours(0, 0, 0, 0)
          }
        },
        pickerOptions1: {},
        pickerOptions2: {},
        pickerOptions3: {},
        pickerOptions4: {},
        pickerOptions5: {},
        pickerOptions6: {},
      };
    },
    created() {
      this.pickerOptions1 = this.pickerOptions;
      this.pickerOptions2 = this.pickerOptions;
      this.pickerOptions3 = this.pickerOptions;
      this.pickerOptions4 = this.pickerOptions;
      this.pickerOptions5 = this.pickerOptions;
      this.pickerOptions6 = this.pickerOptions;
    },
    methods: {
      changeGroup(type, val) {
        if (type == 1) {
          if (val == 0) {
            this.formData.auditIndividualInformation = val;
          }
        } else {
          if (val == 1) {
            this.formData.fillIndividualInformation = val;
          }
        }

      },
      // onBlurValue() {
      //   // // 可以输入小数后两位（0、5、9）
      //   // let isDot = /[\.]/.test(this.formData.registrationFee);
      //   // let lf, rt;
      //   // if (isDot) {
      //   //   lf = this.formData.registrationFee.split(".")[0] ? this.formData.registrationFee.split(".")[0] : 0;
      //   //   rt = this.formData.registrationFee.split(".")[1];
      //   //   if (rt == "" || rt == 0) {
      //   //     this.formData.registrationFee = lf;
      //   //   }
      //   // }
      // },
      onInputValue(val) {
        if (val.length > 1 && val.slice(0, 1) == 0) {
          return this.formData.registrationFee = 0;
        }
        this.formData.registrationFee = val.replace(/[^\d]/g, '');

        // // 可以输入小数后两位（0、5、9）
        // this.formData.registrationFee = val.replace(/[^\d.]/g, '');
        // let isDot = /[\.]/.test(this.formData.registrationFee);
        // let lf, rt;
        // if (isDot) {
        //   lf = this.formData.registrationFee.split(".")[0] ? this.formData.registrationFee.split(".")[0] : 0;
        //   rt = this.formData.registrationFee.split(".")[1];
        //   rt = rt.replace(/[^0|5|9]{0,2}$/g, "");
        //   rt = rt.slice(0, 2);
        //   if (lf != "") {
        //     lf = parseInt(lf);
        //   }
        //   this.formData.registrationFee = lf + "." + rt;
        // } else {
        //   lf = this.formData.registrationFee;
        //   if (lf != "") {
        //     lf = parseInt(lf);
        //   }
        //   this.formData.registrationFee = lf;
        // }
      },
      // 滚动到固定地方
      scrollView(object) {
        console.log(object, "object");
        for (let i in object) {
          if (!i) {
            continue;
          }
          let dom = this.$refs[i];
          if (!dom) {
            continue;
          }
          // 这里是针对遍历的情况（多个输入框），取值为数组
          if (Object.prototype.toString.call(dom) !== "[object Object]") {
            dom = dom[0];
          }
          // 第一种方法（包含动画效果）
          dom.$el.scrollIntoView({
            // 滚动到指定节点
            // 值有start,center,end，nearest，当前显示在视图区域中间
            block: "center",
            // 值有auto、instant,smooth，缓动动画（当前是慢速的）
            behavior: "smooth",
          });
          this.dialogFormFu = {
            title: "提示",
            message: object[i][0].message,
          };
          this.dialogVisibleFu = true;
          // this.$emit("getValues", object[i][0].message, false);
          break; // 因为我们只需要检测一项,所以就可以跳出循环了
        }
      },
      // 保存按钮（更新camp）
      editHandle() {
        this.loading = true;
        this.$refs['formData'].validate((valid, object) => {
          if (!valid) {
            this.scrollView(object);
            return this.loading = false;
          }

          EditCamp(this.formData)
            .then(response => {
              console.log(response);
              if (response.code != 200) {
                this.loading = false;
                return this.msgError(response.msg);
              }
              this.campUrlFu = response.msg;
              this.loading = false;
              this.msgSuccess(response.msg);
            })
            .catch(error => {
              console.log(error);
              this.loading = false;
            });

        });
      },
      // 立即创建按钮
      confirm() {
        this.loading = true;
        for (const k in this.formData) {
          if (this.formData[k] && typeof (this.formData[k]) == 'string') {
            this.formData[k] = this.formData[k].trim();
          }
        }
        this.$refs['formData'].validate((valid, object) => {
          if (!valid) {
            this.scrollView(object);
            return this.loading = false;
          }

          CreateCamp(this.formData)
            .then(response => {
              console.log(response);
              if (response.code != 200) {
                this.loading = false;
                return this.msgError(response.msg);
              }
              this.campUrlFu = response.msg;
              this.loading = false;
              this.successDialogFu = true;
            })
            .catch(error => {
              console.log(error);
              this.loading = false;
            });
        });
      },
      changeSwitch(type, val) {
        if (type == 1) {
          if (val == 1) {
            this.formData.fillIndividualInformation = 1;
            this.formData.fillIndividualInvitationcode = 1;
            this.formData.auditIndividualInformation = 1;
          } else {
            this.formData.fillIndividualInformation = 0;
            this.formData.fillIndividualInvitationcode = 0;
            this.formData.auditIndividualInformation = 0;
          }
        } else if (type == 2) {
          if (val == 1) {
            this.formData.schoolBulkPayment = 1;
          } else {
            this.formData.schoolBulkPayment = 0;
          }
        }
      },
      // picker选择颜色
      colorChange(val) {
        for (const k in this.predefineColors) {
          if (this.predefineColors[k] == val) {
            this.colorChecked[k] = true;
          } else {
            this.colorChecked[k] = false;
          }
        }
      },
      // div选择预设颜色
      selectColor(color, idx) {
        this.formData.systemColor = color;
        this.colorChecked[idx] = true;
        for (const k in this.colorChecked) {
          if (k != idx) {
            this.colorChecked[k] = false;
          }
        }
      },
      // 子组件触发
      closeSuccessDialog(val, type) {
        this.successDialogFu = val;
        this.$refs['formData'].resetFields();
        if (type) {
          this.$router.replace('/campSystem/campOper');
        }
      },
      // 文件上传成功时的钩子-系统logo
      handleLogoSuccess(res, file) {
        if (res.code != 200) {
          this.isLogoLoading = false;
          return this.msgError(res.msg);
        }
        this.formData.systemLogo = res.data;
        this.isLogoLoading = false;
        this.msgSuccess(res.msg);
      },
      // 上传文件之前的钩子-系统logo
      beforeLogoUpload(file) {
        const isType = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt10M = file.size / 1024 / 1024 < 10;

        if (!isType) {
          this.$message.error('上传的系统logo只能是 JPG/JPEG/PNG 格式!');
          return false;
        }
        if (!isLt10M) {
          this.$message.error('上传的系统logo大小不能超过 10M!');
          return false;
        }
        this.isLogoLoading = true;
        return isType && isLt10M;
      },
      // 文件上传成功时的钩子-登录页背景图
      handleBgSuccess(res, file) {
        if (res.code != 200) {
          this.isBgLoading = false;
          return this.msgError(res.msg);
        }
        this.formData.backgroundPicture = res.data;
        this.isBgLoading = false;
        this.msgSuccess(res.msg);
      },
      // 上传文件之前的钩子-登录页背景图
      beforeBgUpload(file) {
        const isType = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt10M = file.size / 1024 / 1024 < 10;

        if (!isType) {
          this.$message.error('上传的登录页背景图只能是 JPG/JPEG/PNG 格式!');
          return false;
        }
        if (!isLt10M) {
          this.$message.error('上传的登录页背景图大小不能超过 10M!');
          return false;
        }
        this.isBgLoading = true;
        return isType && isLt10M;
      },
      // 文件上传成功时的钩子-PDF图
      handlePDFSuccess(res, file) {
        if (res.code != 200) {
          this.isPDFLoading = false;
          return this.msgError(res.msg);
        }
        this.formData.pdfAddress = res.data;
        this.isPDFLoading = false;
        this.msgSuccess(res.msg);
      },
      // 上传文件之前的钩子-PDF图
      beforePDFUpload(file) {
        const isType = file.type === 'application/pdf';
        const isLt10M = file.size / 1024 / 1024 < 10;

        if (!isType) {
          this.$message.error('上传的营地通知书只能是 pdf 格式!');
          return false;
        }
        if (!isLt10M) {
          this.$message.error('上传的营地通知书大小不能超过 10M!');
          return false;
        }
        this.isPDFLoading = true;
        return isType && isLt10M;
      },
      // 设置时间向下范围
      setPickerOptionDown(val) {
        return {
          // selectableRange: val.slice(11, val.length) + ' - 23:59:59',
          selectableRange: '00:00:00 - 23:59:59',
          disabledDate(date) {
            return date.getTime() < new Date(val).setHours(0, 0, 0, 0)
          }
        }
      },
      // 设置时间向上范围
      setPickerOptionUp(val) {
        return {
          // selectableRange: '00:00:00 - ' + val.slice(11, val.length),
          selectableRange: '00:00:00 - 23:59:59',
          disabledDate(date) {
            return date.getTime() > new Date(val).setHours(0, 0, 0, 0)
          }
        }
      },

      // 报名、提交作业、获取证书起止时间改变触发
      datePickerChange(type, val) {
        if (!this.formData.registrationStart && type > 1) {
          this.formData.registrationEnd = null;
          this.formData.downloadCertificateStart = null;
          this.formData.downloadCertificateEnd = null;

          this.pickerOptions2 = this.pickerOptions;
          this.pickerOptions5 = this.pickerOptions;
          this.pickerOptions6 = this.pickerOptions;
          return this.msgInfo('请先选择报名开始时间')
        }
        if (!this.formData.registrationEnd && type > 4) {
          this.formData.downloadCertificateStart = null;
          this.formData.downloadCertificateEnd = null;

          this.pickerOptions5 = this.pickerOptions2;
          this.pickerOptions6 = this.pickerOptions2;
          return this.msgInfo('请先选择报名结束时间')
        }
        if (!this.formData.downloadCertificateStart && type > 5) {
          this.formData.downloadCertificateEnd = null;

          this.pickerOptions6 = this.pickerOptions5;
          return this.msgInfo('请先选择获取证书开始时间')
        }

        if (val) {
          if (type == 1) {
            if (this.formData.registrationEnd
              && new Date(val) >= new Date(this.formData.registrationEnd)
            ) {
              this.formData.registrationEnd = null;
              this.formData.downloadCertificateStart = null;
              this.formData.downloadCertificateEnd = null;
              this.msgInfo('开始时间需早于结束时间')
            } else if (this.formData.registrationEnd
              && new Date(val) < new Date(this.formData.registrationEnd)
            ) {
              return this.pickerOptions2 = this.setPickerOptionDown(val);
            }
            this.pickerOptions2 = this.setPickerOptionDown(val);
            this.pickerOptions5 = this.setPickerOptionDown(val);
            this.pickerOptions6 = this.setPickerOptionDown(val);

          } else if (type == 2) {
            if (this.formData.jobSubmissionStart
              && new Date(val) > new Date(this.formData.downloadCertificateStart)
            ) {
              this.formData.downloadCertificateStart = null;
              this.formData.downloadCertificateEnd = null;
              this.msgInfo('报名起止时间需早于获取证书起止时间')
            } else if (this.formData.jobSubmissionStart
              && new Date(val) <= new Date(this.formData.jobSubmissionStart)
            ) {
              return this.pickerOptions5 = this.setPickerOptionDown(val);
            }
            this.pickerOptions5 = this.setPickerOptionDown(val);
            this.pickerOptions6 = this.setPickerOptionDown(val);

          } else if (type == 5) {
            if (this.formData.downloadCertificateEnd
              && new Date(val) >= new Date(this.formData.downloadCertificateEnd)
            ) {
              this.formData.downloadCertificateEnd = null;
              this.msgInfo('开始时间需早于结束时间')
            }
            this.pickerOptions6 = this.setPickerOptionDown(val);
          }
        } else {
          if (type == 1) {
            return this.pickerOptions2 = this.pickerOptions1;
          } else if (type == 2) {
            return this.pickerOptions5 = this.pickerOptions2;
          } else if (type == 5) {
            return this.pickerOptions6 = this.pickerOptions5;
          }
        }
      },
      // datePickerChange(type, val) {
      //   if (!this.formData.registrationStart && type > 1) {
      //     this.formData.registrationEnd = null;
      //     this.formData.jobSubmissionStart = null;
      //     this.formData.jobSubmissionEnd = null;
      //     this.formData.downloadCertificateStart = null;
      //     this.formData.downloadCertificateEnd = null;
      //
      //     this.pickerOptions2 = this.pickerOptions;
      //     this.pickerOptions3 = this.pickerOptions;
      //     this.pickerOptions4 = this.pickerOptions;
      //     this.pickerOptions5 = this.pickerOptions;
      //     this.pickerOptions6 = this.pickerOptions;
      //     return this.msgInfo('请先选择报名开始时间')
      //   }
      //   if (!this.formData.registrationEnd && type > 2) {
      //     this.formData.jobSubmissionStart = null;
      //     this.formData.jobSubmissionEnd = null;
      //     this.formData.downloadCertificateStart = null;
      //     this.formData.downloadCertificateEnd = null;
      //
      //     this.pickerOptions3 = this.pickerOptions2;
      //     this.pickerOptions4 = this.pickerOptions2;
      //     this.pickerOptions5 = this.pickerOptions2;
      //     this.pickerOptions6 = this.pickerOptions2;
      //     return this.msgInfo('请先选择报名结束时间')
      //   }
      //   if (!this.formData.jobSubmissionStart && type > 3) {
      //     this.formData.jobSubmissionEnd = null;
      //     this.formData.downloadCertificateStart = null;
      //     this.formData.downloadCertificateEnd = null;
      //
      //     this.pickerOptions4 = this.pickerOptions3;
      //     this.pickerOptions5 = this.pickerOptions3;
      //     this.pickerOptions6 = this.pickerOptions3;
      //     return this.msgInfo('请先选择提交作业开始时间')
      //   }
      //   if (!this.formData.jobSubmissionEnd && type > 4) {
      //     this.formData.downloadCertificateStart = null;
      //     this.formData.downloadCertificateEnd = null;
      //
      //     this.pickerOptions5 = this.pickerOptions4;
      //     this.pickerOptions6 = this.pickerOptions4;
      //     return this.msgInfo('请先选择提交作业结束时间')
      //   }
      //   if (!this.formData.downloadCertificateStart && type > 5) {
      //     this.formData.downloadCertificateEnd = null;
      //
      //     this.pickerOptions6 = this.pickerOptions5;
      //     return this.msgInfo('请先选择获取证书开始时间')
      //   }
      //
      //   if (val) {
      //     if (type == 1) {
      //       if (this.formData.registrationEnd
      //         && new Date(val) >= new Date(this.formData.registrationEnd)
      //       ) {
      //         this.formData.registrationEnd = null;
      //         this.formData.jobSubmissionStart = null;
      //         this.formData.jobSubmissionEnd = null;
      //         this.formData.downloadCertificateStart = null;
      //         this.formData.downloadCertificateEnd = null;
      //         this.msgInfo('开始时间需早于结束时间')
      //       } else if (this.formData.registrationEnd
      //         && new Date(val) < new Date(this.formData.registrationEnd)
      //       ) {
      //         return this.pickerOptions2 = this.setPickerOptionDown(val);
      //       }
      //       this.pickerOptions2 = this.setPickerOptionDown(val);
      //       this.pickerOptions3 = this.setPickerOptionDown(val);
      //       this.pickerOptions4 = this.setPickerOptionDown(val);
      //       this.pickerOptions5 = this.setPickerOptionDown(val);
      //       this.pickerOptions6 = this.setPickerOptionDown(val);
      //
      //     } else if (type == 2) {
      //       if (this.formData.jobSubmissionStart
      //         && new Date(val) > new Date(this.formData.jobSubmissionStart)
      //       ) {
      //         this.formData.jobSubmissionStart = null;
      //         this.formData.jobSubmissionEnd = null;
      //         this.formData.downloadCertificateStart = null;
      //         this.formData.downloadCertificateEnd = null;
      //         this.msgInfo('报名起止时间需早于提交作业起止时间')
      //       } else if (this.formData.jobSubmissionStart
      //         && new Date(val) <= new Date(this.formData.jobSubmissionStart)
      //       ) {
      //         return this.pickerOptions3 = this.setPickerOptionDown(val);
      //       }
      //       this.pickerOptions3 = this.setPickerOptionDown(val);
      //       this.pickerOptions4 = this.setPickerOptionDown(val);
      //       this.pickerOptions5 = this.setPickerOptionDown(val);
      //       this.pickerOptions6 = this.setPickerOptionDown(val);
      //
      //     } else if (type == 3) {
      //       if (this.formData.jobSubmissionEnd
      //         && new Date(val) >= new Date(this.formData.jobSubmissionEnd)
      //       ) {
      //         this.formData.jobSubmissionEnd = null;
      //         this.formData.downloadCertificateStart = null;
      //         this.formData.downloadCertificateEnd = null;
      //         this.msgInfo('开始时间需早于结束时间')
      //       } else if (this.formData.jobSubmissionEnd
      //         && new Date(val) < new Date(this.formData.jobSubmissionEnd)
      //       ) {
      //         return this.pickerOptions4 = this.setPickerOptionDown(val);
      //       }
      //       this.pickerOptions4 = this.setPickerOptionDown(val);
      //       this.pickerOptions5 = this.setPickerOptionDown(val);
      //       this.pickerOptions6 = this.setPickerOptionDown(val);
      //
      //     } else if (type == 4) {
      //       if (this.formData.downloadCertificateStart
      //         && new Date(val) > new Date(this.formData.downloadCertificateStart)
      //       ) {
      //         this.formData.downloadCertificateStart = null;
      //         this.formData.downloadCertificateEnd = null;
      //         this.msgInfo('提交作业起止时间需早获取证书');
      //       } else if (this.formData.downloadCertificateStart
      //         && new Date(val) <= new Date(this.formData.downloadCertificateStart)
      //       ) {
      //         return this.pickerOptions5 = this.setPickerOptionDown(val);
      //       }
      //       this.pickerOptions5 = this.setPickerOptionDown(val);
      //       this.pickerOptions6 = this.setPickerOptionDown(val);
      //
      //     } else if (type == 5) {
      //       if (this.formData.downloadCertificateEnd
      //         && new Date(val) >= new Date(this.formData.downloadCertificateEnd)
      //       ) {
      //         this.formData.downloadCertificateEnd = null;
      //         this.msgInfo('开始时间需早于结束时间')
      //       }
      //       this.pickerOptions6 = this.setPickerOptionDown(val);
      //     }
      //   } else {
      //     if (type == 1) {
      //       return this.pickerOptions2 = this.pickerOptions1;
      //     } else if (type == 2) {
      //       return this.pickerOptions3 = this.pickerOptions2;
      //     } else if (type == 3) {
      //       return this.pickerOptions4 = this.pickerOptions3;
      //     } else if (type == 4) {
      //       return this.pickerOptions5 = this.pickerOptions4;
      //     } else if (type == 5) {
      //       return this.pickerOptions6 = this.pickerOptions5;
      //     }
      //   }
      // },
      changeEditor(val) {
        this.formData.studentRecruitmentBrochure = val;
      },
      // 子组件值改变，父组件值相应改变(子组件触发)
      changeEditor2(val) {
        this.formData.examInstructions = val;
      },
    },
    watch: {
      formDataFu(val) {
        this.formData = val;
        if(this.$route.query.active==1){
          if (this.formData.registrationStart) {
            this.datePickerChange(1, this.formData.registrationStart);
          }
          if (this.formData.registrationEnd) {
            this.datePickerChange(2, this.formData.registrationEnd);
          }
          if (this.formData.jobSubmissionStart) {
            this.datePickerChange(3, this.formData.jobSubmissionStart);
          }
          if (this.formData.jobSubmissionEnd) {
            this.datePickerChange(4, this.formData.jobSubmissionEnd);
          }
          if (this.formData.downloadCertificateStart) {
            this.datePickerChange(5, this.formData.downloadCertificateStart);
          }
          if (this.formData.downloadCertificateEnd) {
            this.datePickerChange(6, this.formData.downloadCertificateEnd);
          }
        }
        this.predefineColors.forEach((item, idx) => {
          if (this.formData.systemColor == item) {
            this.colorChecked[idx] = true;
          } else {
            this.colorChecked[idx] = false;
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
  @import "@/assets/styles/campCommon.scss";

  .campForm {
    padding: 0 !important;

    .cont_title {
      position: relative;
      height: 24px;
      line-height: 24px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #12141C;
      margin-bottom: 20px;

      span {
        font-size: 12px !important;
        color: #F59C45;
      }

      i {
        position: absolute;
        left: -12px;
        z-index: 1000;
        font-style: normal;
        color: #ff4949;
        margin-right: 4px;
      }
    }

    .el-form-item {
      position: relative;

      .el-form-item__label {
        height: 32px;
        line-height: 32px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #12141C;
      }

      .el-form-item__content {
        text-align: left !important;

        .item_info {
          position: absolute;
          top: -32px;
          height: 32px;
          line-height: 32px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #BCC2CA;

          &.item_info1 {
            left: 60px;
            color: #F59C45;
          }

          &.item_info2 {
            left: 100px;
          }

          &.item_info3 {
            left: 60px;
          }

          &.item_info4 {
            left: 80px;
          }
        }

        .el-input, .el-date-editor {
          height: 40px;
          line-height: 40px;

          .el-input__icon,
          .el-range-separator {
            line-height: 32px;
          }

          .el-input__inner {
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            border: 1px solid #E1E3E6;

            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;

            &::-webkit-input-placeholder {
              color: #BCC2CA;
            }

            &::-ms-input-placeholder {
              color: #BCC2CA;
            }
          }
        }

        .el-upload {
          width: 100% !important;
          max-width: 345px !important;
          height: 140px !important;
          background: #F6F8FA;
          border-radius: 4px;
          border: 0;
          text-align: center !important;

          .el-icon-plus:before {
            content: "";
          }

          .logo_img, .bg_img {
            max-width: 100%;
            max-height: 100%;
            margin: 0 auto;
          }

        }

        .pdf-box {
          line-height: 20px;
          text-align: left;
        }

        .el-loading-mask {
          width: 100%;
          max-width: 345px;
          height: 140px;
          background: #F6F8FA;
          border-radius: 4px;
          border: 0;
        }

        .el-switch {
          width: 60px;
          height: 28px;

          .el-switch__core {
            width: 60px !important;
            height: 28px;
            border-radius: 20px;
            line-height: 28px;

            &::after {
              width: 20px;
              height: 20px;
              top: 2.5px;
              left: 2.5px;
            }
          }

          &.is-checked {
            .el-switch__core::after {
              left: 100%;
              margin-left: -22.5px;
            }
          }
        }

        .el-radio {
          .el-radio__label {
            color: #656872;
          }

          .el-radio__input {
            .el-radio__inner {
              width: 20px;
              height: 20px;
              line-height: 20px;
              border-radius: 50%;
            }

            &.is-checked {
              .el-radio__inner {
                background: #ffffff !important;

                &::after {
                  width: 7.5px;
                  height: 7.5px;
                  background: #4D75F3 !important;
                }
              }
            }
          }
        }

        .el-color-picker {
          .el-color-picker__trigger {
            padding: 0;
            width: 40px;
            height: 40px;
            border-radius: 4px;
            border: 2px dotted #E1E3E6;
            background-color: #ffffff;

            .el-color-picker__color {
              border: 0;

              &.is-alpha {
                background-image: none;
              }
            }

            .el-icon-close {
              color: #D8D8D8;
            }
          }
        }

        .color_item {
          display: inline-block;
          width: 40px;
          height: 40px;
          border-radius: 4px;
          margin-right: 20px;
          cursor: pointer;

          &:hover {
            border: 2px dotted #E1E3E6;
          }

          &.is_check {
            border: 2px dotted #E1E3E6;
          }
        }
      }

      /*底部按钮样式*/
      &.btn {

        padding: 50px 0;

        .el-form-item__content {
          text-align: center !important;
        }

        .el-button {
          width: 200px;
          height: 50px;
          background: #4D75F3;
          border-radius: 4px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #FFFFFF;

          span {
            font-size: 14px !important;
          }
        }
      }

      /*去除*号*/
      &.no_label {
        .el-form-item__label:before {
          content: '' !important;
        }
      }
    }

    .timeStyle {
      display: flex;
      flex-flow: row;

      .el-form-item {
        flex: 1;
      }

      .zhi {
        padding: 42px 15px 22px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #656872;
      }
    }

    .signUp {
      .el-form-item__label {
        width: 150px;
        float: left;
      }

      .font_color {
        .el-form-item__label {
          color: #656872;
        }
      }
    }
  }

</style>

